<!--
  通用 【签约开通】页面

  @author terrfly
  @site https://www.jeequan.com
  @date 2022/11/03 08:35
-->
<template>
  <div v-if="vdata.visible">
    <div v-if="vdata.state == '2'">
      <a-tabs @change="selectTabs">
        <a-tab-pane v-if="configMode != 'mchApplyment'" key="payWayRateConfig" tab="业务开通">
          <a-form
            ref="stepForm1Ref"
            :model="vdata.applyData"
            :label-col="{ span: 4 }"
            :wrapper-col="{ span: 8 }"
          >
            <!-- <a-form-item label="商户类型" name="merchantType">
              <a-tag color="blue">{{ vdata.applyData.merchantType == '1' ? '个人' : (vdata.applyData.merchantType == '2' ? '个体' :'企业') }}</a-tag>
            </a-form-item> -->
             
            <a-form ref="infoFormModel" layout="vertical">
              <JeepayPaywayRatePanel 
                ref="jeepayPaywayRatePanelRef" 
                :configMode="configMode"
                :infoId="vdata.recordId + '_' + vdata.mchNo" 
                :selectIfCode="vdata.ifCode" 
                onlyRate="true"
              />
            </a-form>
            <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;" />
            <div class="drawer-btn-center">
              <a-button class="jeepay-m-btn" data-type="block" type="primary" :loading="vdata.btnLoading" @click="onSubmit"><check-outlined />确认开通</a-button>
            </div>
          </a-form>
        </a-tab-pane>
        <a-tab-pane key="signConfig" tab="认证开通">
          <NextBizsCommonPage ref="nextBizsCommonPage" />
        </a-tab-pane>
      </a-tabs>
    </div>
    <div v-else>
      <a-result title="暂无更多操作">
        <template #icon>
          <smile-twoTone />
        </template>
      </a-result>
    </div>
  </div>
</template>

<script lang="ts" setup>

import { ref, nextTick, inject } from 'vue'
import NextBizsCommonPage from '../../commons/NextBizsCommonPage.vue'
import { API_URL_MCH_APPLYMENT_LIST, req, $leshuapayConfigOpen } from '@/api/manage'
import { getCurrentInstance, reactive } from 'vue'
const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties

const jeepayPaywayRatePanelRef = ref()
const nextBizsCommonPage = ref()
let configMode : any = inject('configMode')

const vdata : any = reactive({
  state: '',
  recordId: null, // 更新对象ID
  applyData: {} as any, // 进件资料对象
  visible: false, // 是否显示弹层/抽屉
})

function onSubmit() {
  vdata.btnLoading = true

  // 放置费率配置项
  let paywayFeeList = jeepayPaywayRatePanelRef.value.getReqMchRatePaywayFeeList()
  if (!paywayFeeList) {
    return
  }
  vdata.applyData.paywayFeeList = paywayFeeList
  
  $leshuapayConfigOpen(vdata.recordId, vdata.applyData).then(() => { 
    $infoBox.message.success('业务开通发起成功！')
    vdata.btnLoading = false
  }).catch(() => {
    vdata.btnLoading = false
  })
  
}

function selectTabs (key) { // 清空必填提示
  if (key) {
    vdata.groupKey = key
  }
  if(key == 'signConfig') {
    nextTick(() => {
      nextBizsCommonPage.value.pageRender(vdata.recordId) // 直接调用通用组件
    })
  }
}

// 对外暴露的 页面渲染函数  也用作初始化
function pageRender (applyId){
  req.getById(API_URL_MCH_APPLYMENT_LIST, applyId, { }).then( (res) => {
    vdata.applyData = JSON.parse(res.applyDetailInfo)
    // 状态
    vdata.state = res.state
    // 单号
    vdata.recordId = applyId
    // 类型 
    vdata.ifCode = res.ifCode
    // 商户号
    vdata.mchNo = res.mchNo
    // 渠道信息1
    // vdata.result = res.channelVar1
    vdata.visible = true
  })
}

defineExpose({ pageRender })
</script>
